<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <title>INSPINIA | Dashboard</title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>
        body {
            min-height: 500px;
        }
        .layui-form-label {
            width: 70px;
        }

        .layui-input-block {
            margin-left: 70px;
        }
    </style>
</head>

<body>
<h3>基本信息</h3>
<div class="ares-mb emr-info"></div>
<h3>报告内容</h3>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">时间<i class="ares-text-red">*</i></label>
        <div class="layui-input-block">
            <input name="datetime" id="datetime" placeholder="请选择时间" readonly class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类别<i class="ares-text-red">*</i></label>
        <div class="layui-input-block">
            <input name="type" placeholder="请输入报告类别" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述<i class="ares-text-red">*</i></label>
        <div class="layui-input-block">
            <textarea name="remark" placeholder="请输入描述内容" class="layui-textarea" lay-verify="required"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片<i class="ares-text-red">*</i></label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload-btn">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <div id="report-images" class="ares-row ares-mt"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
        </div>
    </div>
</form>


<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
    var init;
    layui.use(['form', 'upload', 'laydate', 'utils', 'commonServices', 'mandyServices', 'qs'], function (form, upload, laydate, utils, commonServices, mandyServices, qs) {
        var emrId, patientId, uploadIns, images = [];

        init = function () {
            var localHash = location.hash,
                queryStr = localHash.split('?')[1],
                routerParams = top.layui.routers.params,
                routerQuery = queryStr ? qs.parse(queryStr) : {};

            emrId = routerParams.emrId;
            laydate.render({
                elem: '#datetime',
                type: 'datetime',
                value: new Date()
            });
            uploadIns = upload.render({
                elem: '#upload-btn',
                url: '/file/uploadImageFile',
                done: function (res) {
                    images.push(res.data);
                    renderImages(images);
                },
                error: function () {
                    utils.msgError('上传失败')
                }
            });
            getPatientInfo();
        }
        init();

        /**
         * @author: ares
         * @date: 2021/3/30 10:41
         * @description: 删除报告图片
         */
        $('#report-images').on('click', '.remove-img-icon', function (event) {
            images.splice($(this).data('idx'), 1);
            renderImages(images);
        })

        /**
         * @author: ares
         * @date: 2021/3/30 10:57
         * @description: 提交
         */
        form.on('submit(submit)', function (data) {
            var fields = data.field,
                $this = $(data.elem),
                submitData = {
                    type: fields.type,
                    check_time: new Date(fields.datetime).getTime(),
                    remark: fields.remark,
                    patient: {
                        id: patientId
                    },
                    images: images
                };

            if (!images.length) {
                utils.msgError('请上传报告图片');
                return false;
            }

            $this.prop('disabled', true).addClass('layui-btn-disabled')
            mandyServices.mandy_post_inspection_report(submitData).then(function (res) {
                utils.msgSuccess(res.message)
                $this.prop('disabled', false).removeClass('layui-btn-disabled')
                utils.closeCurrentSysTab();
            }).catch(function (err) {
                $this.prop('disabled', false).removeClass('layui-btn-disabled')
            })
            return false;
        });

        /**
         * @author: ares
         * @date: 2021/3/30 10:24
         * @description: 渲染报告图片
         * @param{array} images
         */
        function renderImages(images) {
            var $reportImages = $('#report-images'),
                $fragment = $(document.createDocumentFragment());
            if (!Array.isArray(images) || !images.length) {
                $reportImages.empty();
                return;
            }
            $.each(images, function (index, image) {
                $fragment.append('<div class="ares-col-sm-6 ares-col-md-4 ares-col-lg-3">' +
                    '<div class="ares-position-relative ares-p ares-border">' +
                    '<img class="ares-w-100" src="' + image + '" alt=""/>' +
                    '<i data-idx="' + index + '" class="remove-img-icon ares-cur-pointer layui-icon layui-icon-delete ares-text-red ares-text-lg ares-position-absolute ares-absolute-tr-offset"></i> ' +
                    '</div>' +
                    '</div>'
                )
            })
            $reportImages.empty().append($fragment);
        }

        /**
         * @author: ares
         * @date: 2021/3/10 10:49
         * @description: 获取患者基本信息
         */
        function getPatientInfo() {
            commonServices.getEmrInfoService(emrId, null, null, $('.emr-info')).then(function (res) {
                patientId = res.patient.id;
            });
        }

    })
</script>

</body>
</html>



